<template>
  <div>
    <div class="card-header">
      <!-- 头部的card卡片 -->
      <el-card class="box-card">
        <!-- 搜索框的form表单 -->
        <el-form
          :inline="true"
          :model="ruleForm"
          status-icon
          :rules="customRules"
          ref="ruleForm"
        >
          <el-form-item label="合作商搜索:" prop="formData">
            <el-input
              placeholder="请输入"
              autocomplete="off"
              v-model="ruleForm.formData"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="medium"
              @click="queryForm"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div>
      <!-- 主体的card卡片 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            size="medium"
            @click="add"
            >新建</el-button
          >
        </div>
        <!-- table表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="name" label="合作商名称"> </el-table-column>
          <el-table-column prop="account" label="账号"> </el-table-column>
          <el-table-column prop="vmCount" label="设备数量"> </el-table-column>
          <el-table-column prop="ratio" label="分成比例(%)"> </el-table-column>
          <el-table-column prop="contact" label="联系人"> </el-table-column>
          <el-table-column prop="mobile" label="联系电话"> </el-table-column>
          <el-table-column prop="" label="操作" width="300">
            <!-- table表单中的自定义列，使用插槽 -->
            <template #default="scope">
              <el-button type="text" @click="resetPassword(scope.row.id)"
                >重置密码</el-button
              >
              <el-button type="text" @click="checkForm(scope.row)"
                >查看详情</el-button
              >
              <el-button type="text" @click="alterForm(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                style="color: #ed4492"
                @click="delForm(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div>
          <div class="fl-lift">
            共{{ total }}条记录 第{{ query.pageIndex }}/{{ totalPage }}
          </div>
          <div class="fl-right">
            <el-button-group>
              <el-button
                type="info"
                plain
                @click="previousPage"
                :disabled="query.pageIndex === 1 ? true : false"
                >上一页</el-button
              >
              <el-button
                type="info"
                plain
                @click="nextPage"
                :disabled="query.pageIndex === Number(totalPage) ? true : false"
                >下一页</el-button
              >
            </el-button-group>
          </div>
        </div>
      </el-card>
    </div>
    <!-- dialog对话框 -->
    <el-dialog
      :title="title"
      width="30%"
      :visible.sync="dialogFormVisible"
      @close="closeForm"
    >
      <div v-if="title === '合作商'">
        <!-- 主体的form表单 -->
        <el-form
          :rules="rules"
          ref="dialogForm"
          :model="form"
          label-width="120px"
        >
          <el-form-item label="合作商名称" prop="name">
            <el-input placeholder="请输入" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input placeholder="请输入" v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input placeholder="请输入" v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="分成比例(%)" prop="ratio">
            <el-input-number
              v-model="form.ratio"
              controls-position="right"
              :min="0"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input placeholder="请输入" v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入" v-model="form.password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="info">取消</el-button>
          <el-button type="warning" @click="serveAdd">确认</el-button>
        </div>
      </div>
      <div v-if="title === '修改合作商'">
        <!-- 主体的form表单 -->
        <el-form
          :rules="rules"
          ref="dialogForm"
          :model="form"
          label-width="120px"
        >
          <el-form-item label="合作商名称" prop="name">
            <el-input placeholder="请输入" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input placeholder="请输入" v-model="form.contact"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input placeholder="请输入" v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="分成比例(%)" prop="ratio">
            <el-input-number
              v-model="form.ratio"
              controls-position="right"
              :min="0"
              :max="100"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="info">取消</el-button>
          <el-button type="warning" @click="serveAdd">确认</el-button>
        </div>
      </div>
      <div v-if="title === '合作商详情'">
        <!-- 查看详情的form表单 -->
        <el-form label-width="120px">
          <div class="button-box">
            <el-form-item label="联系人"> {{ form.contact }} </el-form-item>
            <el-form-item label="分成比例"> {{ form.ratio }}</el-form-item>
          </div>
          <div class="button-box1">
            <el-form-item label="合作商名称"> {{ form.name }}</el-form-item>
            <el-form-item label="联系电话"> {{ form.mobile }} </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入的请求
import {
  newCooperation,
  delCooperation,
  modifyPointCooperation,
  partnersRegion,
  resetPassword
} from '@/api/user'
export default {
  name: 'region-page',
  components: {},
  props: {},
  data() {
    // form表单的自定义校验规则
    const validataMobile = (rule, value, callback) => {
      if (value) {
        callback()
      } else {
        callback()
        // callback(new Error('不能为空'))
      }
    }
    return {
      list: [],
      checkList: [],
      query: {
        pageIndex: 1,
        pageSize: 10
      },
      total: '',
      totalPage: '',
      dialogFormVisible: false,
      title: '',
      form: {
        name: '',
        account: '',
        password: '',
        ratio: 0,
        contact: '',
        phone: '',
        mobile: ''
      },
      newId: '',
      rules: {
        name: [
          { required: true, message: '请输入区域', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ],
        radio: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ],
        contact: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入备注说明', trigger: 'change' }
        ]
      },
      customRules: {
        formData: [{ validator: validataMobile, trigger: 'blur' }]
      },
      ruleForm: {
        formData: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    // 在页面显示之前去调用方法,方便复用
    this.partnersRegion()
  },
  methods: {
    // 获取区域列表
    async partnersRegion() {
      const res = await partnersRegion(this.query)
      console.log(res)
      this.list = res.currentPageRecords
      this.total = res.totalCount
      this.totalPage = res.totalPage
    },
    // 实现上一页的功能
    previousPage() {
      this.query.pageIndex -= 1
      this.partnersRegion()
    },
    // 实现下一页的功能
    nextPage() {
      this.query.pageIndex += 1
      this.partnersRegion()
    },
    // 新增区域
    add() {
      this.title = '合作商'
      this.dialogFormVisible = true
    },
    // 对话框的所携带的事件,在这里用于清空表单内容
    closeForm() {
      if (this.title === '合作商') {
        this.$refs.dialogForm.resetFields()
        this.form = {
          name: '',
          account: '',
          password: '',
          ratio: 0,
          contact: '',
          phone: '',
          mobile: ''
        }
      }
    },
    // 根据条件去判断是添加还是修改
    async serveAdd() {
      try {
        await this.$refs.dialogForm.validate()
        if (this.title === '修改合作商') {
          const id = this.newId
          const data = this.form
          await modifyPointCooperation(id, data)
        } else {
          await newCooperation(this.form)
          this.$message.success('添加成功')
        }
        this.dialogFormVisible = false
        this.partnersRegion()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除区域
    async delForm(id) {
      try {
        await delCooperation(id)
        this.$message.success('删除成功')
        this.partnersRegion()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改区域
    async alterForm(row) {
      console.log(row)
      this.title = '修改合作商'
      this.form.name = row.name
      this.form.account = row.account
      this.form.password = row.password
      this.form.ratio = row.ratio
      this.form.contact = row.contact
      this.form.phone = row.phone
      this.form.mobile = row.mobile
      this.newId = row.id
      this.dialogFormVisible = true
    },
    async checkForm(row) {
      console.log(row)
      this.title = '合作商详情'
      this.form.name = row.name
      this.form.contact = row.contact
      this.form.mobile = row.mobile
      this.form.ratio = row.ratio

      this.dialogFormVisible = true
    },
    // 重置密码
    async resetPassword(id) {
      await resetPassword(id)
    },
    // 判断搜索框的数据,然后返回匹配的数据去渲染列表
    async queryForm() {
      const params = {}
      params.pageIndex = this.query.pageIndex
      params.pageSize = this.query.pageSize
      params.name = this.ruleForm.formData
      const res = await partnersRegion(params)
      console.log(res)
      this.list = res.currentPageRecords
      this.total = res.totalCount
      this.totalPage = res.totalPage
    }
  }
}
</script>

<style scoped lang="scss">
.card-header {
  margin-bottom: 20px;
}
.el-form-item {
  margin-bottom: 0;
}
.fl-lift {
  float: left;
  margin: 20px;
}
.fl-right {
  float: right;
  margin: 20px;
}
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
::v-deep .el-input__inner {
  width: 360px;
  margin-bottom: 20px;
}
.el-input-number {
  width: 360px;
  height: 40px;
  margin-bottom: 20px;
}
.button-box {
  float: right;
  margin-right: 50px;
}
.button-box1 {
  float: left;
}
::v-deep .el-dialog__body {
  min-height: 200px;
}
</style>
